<template>
  <div class="analyse-container">
    <div class="analyse-page-list">
      <el-collapse v-model="activeCollapse" accordion>
        <el-collapse-item v-for="item in analyseList" :key="item.id" :name="item.id">
          <div slot="title" class="group-title">
            <i
              class="icon-toggle"
              :class="activeCollapse === item.id ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"
            ></i>
            <el-tooltip effect="dark" :content="item.name" placement="top-start">
              <span class="name">{{ item.name }}</span>
            </el-tooltip>
            <el-popover placement="right-start" width="120" trigger="hover" popper-class="tag-group-handler">
              <ul>
                <li @click="$router.push({ name: 'analyse-funnel' })">
                  <i class="el-icon-circle-plus-outline"></i>新建分析
                </li>
              </ul>
              <i class="el-icon-more group-handler" slot="reference"></i>
            </el-popover>
          </div>
          <!-- <funnel-list ref="funnelList" v-if="item.id === 'funnel'" @updateContent="updateContent"></funnel-list> -->
        </el-collapse-item>
      </el-collapse>
    </div>
    <!-- <funnel-content
      ref="funnelContent"
      :config="selectItem"
      @deleteFunnel="deleteFunnel"
      v-if="activeCollapse === 'funnel'"
    ></funnel-content> -->
  </div>
</template>

<script>
// import funnelList from './funnel/funnel-list'
// import funnelContent from './funnel/funnel-content'
export default {
  components: {
    // funnelList,
    // funnelContent
  },
  data() {
    return {
      activeCollapse: '',
      analyseList: [
        { id: 'funnel', name: '漏斗分析', icon: 'iconFunnel' },
        { id: 'spread', name: '分布分析', icon: '' },
        { id: 'cross', name: '交叉营销', icon: '' }
      ],
      selectItem: {}
    }
  },
  watch: {
    activeCollapse(val) {
      this.$refs[val + 'List'][0].getList()
    }
  },
  methods: {
    getResults() {
      if (!this.activeCollapse) this.activeCollapse = 'funnel'
    },
    updateContent(item) {
      this.selectItem = item
    },
    deleteFunnel() {
      this.$refs.funnelList[0].handleDelete()
    }
  }
}
</script>

<style lang="scss"></style>
